<template>
	<div class="app-container">
		<div class="header">
			<svg-icon icon-class="system-erp" style="width: 18px; height: 18px; position: relative; top: 1px; margin-right: 10px" />修改基本信息
		</div>
		<el-form ref="baseform" :model="form" label-position="right" :rules="rules" label-width="120px">
			<el-form-item prop="quotationName" label="标题">
				<el-input v-model="form.quotationName" style="width: 50%" placeholder="请输入标题" />
			</el-form-item>
			<el-form-item prop="projectId" label="项目">
				<el-select
					v-model="form.projectId"
					style="width: 50%"
					filterable
					remote
					disabled
					reserve-keyword
					remote-show-suffix
					placeholder="请选择项目"
					:remote-method="remoteMethod"
					:loading="loading">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
				<span style="color: #f66c6c; margin-left: 20px">仅跟单中的项目可以创建报价，请检查项目状态</span>
			</el-form-item>
			<el-form-item label="附件上传">
				<el-upload
					v-model:file-list="filelist"
					:action="fileUrl"
					ref="upload"
					:headers="token"
					name="files"
					:on-success="handleSuccess"
					:on-remove="handleRemove"
					style="width: 640px">
					<el-button type="primary">上传</el-button>
				</el-upload>
			</el-form-item>
			<el-form-item prop="quotationNote" label="备注">
				<el-input v-model="form.quotationNote" :rows="10" type="textarea" style="margin-bottom: 5px" placeholder="" />
			</el-form-item>
		</el-form>
		<div style="line-height: 80px; height: 80px; padding-left: 100px">
			<el-button type="primary" @click="submit">提交</el-button>
			<el-button @click="reback">返回</el-button>
		</div>
	</div>
</template>
<script setup>
import { reactive } from 'vue'
const { proxy } = getCurrentInstance()
import { updateQuotation, getQuotation } from '@/api/price/price'
import { selectProject } from '@/api/project/project'

import { getConfigKey } from '@/api/system/config'
import { getToken } from '@/utils/auth'
import { useRoute } from 'vue-router'
import useTagsViewStore from '@/store/modules/tagsView'
const tagsView = useTagsViewStore()
const route = useRoute()
const router = useRouter()
const baseform = ref()
const fileUrl = ref('')
getConfigKey('file_upload').then((response) => {
	fileUrl.value = response.msg
})
const token = { Authorization: 'Bearer ' + getToken() }

const filelist = ref([])
const form = reactive({
	quotationId: '',
	quotationName: '',
	projectId: '',
	quotationFile: '',
	quotationNote: '',
	quotationStatus: '2'
})
if (route.query.id) {
	getQuotation(route.query.id).then((res) => {
		for (let item in form) {
			form[item] = res.data[item]
		}
		form['quotationFile'] = res.data.quotationFile
		if (form['quotationFile']) {
			filelist.value.push({ name: res.data.quotationFile, url: res.data.quotationFile })
		}
		form['quotationStatus'] = '2'
	})
}
const handleSuccess = (response) => {
	form.quotationFile = response.data[0]
	filelist.value = [{ name: response.data[0], url: response.data[0] }]
}
const handleRemove = () => {
	form.quotationFile = ''
}

const rules = {
	quotationName: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
	projectId: [{ required: true, message: '项目不能为空', trigger: 'blur' }],
	quotationNote: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
}
const loading = ref(false)
const list = ref([])
const options = ref([])

selectProject().then((res) => {
	list.value = res.map((e) => {
		return {
			label: e.projectName,
			value: e.projectId
		}
	})
	options.value = list.value
})
const remoteMethod = (query) => {
	if (query) {
		loading.value = true
		setTimeout(() => {
			loading.value = false
			options.value = list.value.filter((item) => {
				return item.label.toLowerCase().includes(query.toLowerCase())
			})
		}, 200)
	} else {
		options.value = list.value
	}
}

const submit = () => {
	baseform.value.validate((valid, e) => {
		if (valid) {
			updateQuotation(form).then((res) => {
				proxy.$modal.msgSuccess('修改成功！')
				tagsView.delView(router.currentRoute.value)
				router.go(-1)
			})
		}
	})
}

const reback = () => {
	tagsView.delView(router.currentRoute.value)
	router.go(-1)
}
</script>
<style lang="scss" scoped>
.header {
	height: 40px;
	line-height: 40px;
	border-bottom: 1px rgba(240, 240, 240, 1) solid;
	margin-bottom: 5px;
}
</style>
